<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /* 图片 */
            background-image: url("src/main/webapp/img/qq2.jpeg");
            /* 使背景图像完全覆盖屏幕，背景图像的某些部分也许无法显示在背景定位区域中。 */
            background-size:cover;
            /* 设置背景图像是否固定,不随着页面的其余部分滚动。 */
            background-attachment: fixed;
            /* 设置背景图片不平铺 */
            background-repeat:no-repeat;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .bg {
            position: relative;
            height: 336px;
            margin-top: 408px;
        }
        .mountain {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(src/main/webapp/img/mountain.png) no-repeat;
            opacity: 0.8;
            animation: mountainMove 20s linear forwards infinite;
        }
        .bg .bear {
            position: absolute;
            height: 100px;
            width: 200px;
            margin-top: 237px;
            background: url(src/main/webapp/img/bear.png) no-repeat;
            animation: run 0.5s steps(8) infinite,
            move 3s linear forwards;
        }
        @keyframes run {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: -1600px 0px;
            }
        }
        @keyframes move {
            0% {
                left: 0px;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
        @keyframes mountainMove {
            0% {
                background-position: 0px 0px;
            }
            100% {
                background-position: -1800px 0px;
            }
        }

        header {
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;
            line-height: 60px;
            width: 100%;
        }
        .logo {
            float: left;
            margin-left: 20px;
        }
        header ul {
            margin-left: 50px;
            float: left;
        }
        header ul li {
            float: left;
            text-align: center;
            margin-right: 30px;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        header .el-menu-demo {
            float: left;
            margin-left: 30px;
        }
        header .input-with-select {
            width: 330px;
        }
        header .rl {
            float: right;
            margin-right: 30px;
        }
        .PersonalCenter {
            float: right;
            margin-right: 30px;
        }
        .el-icon-s-custom {
            float: left;
            margin-top: 24px;
            font-size: 12px;
        }
        .yyzh,
        .myzh {
            width: 80px;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 熊和山 -->
    <div class="bg">
        <div class="mountain"></div>
        <div class="bear"></div>
    </div>

    <!-- 头部 -->
    <header>
        <!-- log -->
        <div class="logo">
            <img src="src/main/webapp/img/logo.png" alt="">
        </div>
        <!-- log边上的导航栏 -->
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#ffffff"
                text-color="#000000"
                active-text-color="#13B7F6">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>

        <div style="margin-left: 25px; float: left;">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>

        <!-- 个人中心 -->
        <div class="PersonalCenter">
            <a class="el-icon-s-custom" href="#"></a>
            <a href="#">个人中心</a>
        </div>


        <!-- 注册和登录 -->
        <div class="rl">
            <el-button type="primary" plain @click="rigisterVisible = true">注册</el-button>
            <el-button type="primary" plain @click="loginVisible = true">登录</el-button>
        </div>


    </header>

    <!--注册对话框表单-->
    <el-dialog
            title="注册"
            :visible.sync="rigisterVisible"
            width="30%">

        <div class="yyzh">
            <el-link type="info" target="_blank" @click="yyzh" style="color: red">已有账号?</el-link>
        </div>

        <el-form ref="form" :model="user" label-width="80px">

            <el-form-item label="用户名">
                <el-input v-model="user.userName"></el-input>
            </el-form-item>

            <el-form-item label="用户密码">
                <el-input v-model="user.passWord"></el-input>
            </el-form-item>


            <el-form-item label="电话号码">
                <el-input v-model="user.phone"></el-input>
            </el-form-item>

            <el-form-item label="家庭住址">
                <el-input type="textarea" v-model="user.addr"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="REGISTER">注册</el-button>
                <el-button @click="rigisterVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--登录对话框表单-->
    <el-dialog
            title="登录"
            :visible.sync="loginVisible"
            width="30%">

        <div class="myzh">
            <el-link type="info" target="_blank" @click="myzh" style="color: red;">还没有账号?</el-link>
        </div>

        <el-form ref="form" :model="user" label-width="80px">

            <el-form-item label="用户名">
                <el-input v-model="user.userName"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input type="password" v-model="user.passWord"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="LOGIN">登录</el-button>
                <el-button @click="loginVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>

<script src="src/main/webapp/js/vue.js"></script>
<script src="src/main/webapp/element-ui/lib/index.js"></script>
<script src="src/main/webapp/js/axios.js"></script>
<link rel="stylesheet" href="src/main/webapp/element-ui/lib/theme-chalk/index.css">
<script>
    //1.创建vue核心对象
    new Vue({
        el:"#app",
        data() {
            return {
                activeIndex: '1',
                input: '',
                //添加数据对话框是否展示的标记
                rigisterVisible: false,
                loginVisible: false,
                //品牌模型数据
                user: {
                    // id:'',
                    userName: "",
                    passWord: '',
                    phone: "",
                    addr:""
                },
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //注册方法
            REGISTER() {
                // console.log(this.user);
                _this = this;
                //发送ajax异步请求发送数据
                axios({
                    method: "post",     //提交的方式
                    url: "http://localhost:8080/RegisterAndLogin/registerUserServlet",   //提交的路径
                    data: _this.user    //提交的数据
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //添加成功
                        //1.弹出信息提示添加成功
                        _this.$message({
                            message: '恭喜你，注册成功',
                            type: 'success'
                        });
                        //2.关闭窗口
                        _this.rigisterVisible = false;
                    }
                })
            },
            //登录方法
            LOGIN() {
                _this = this;
                axios({
                    method: "get",
                    url: "http://localhost:8080/RegisterAndLogin/loginUserServlet?userName="+_this.user.userName+"&passWord="+_this.user.passWord,
                    data:_this.user
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //登录成功
                        _this.loginVisible = false;
                        //1.弹出信息提示添加成功
                        _this.$message({
                            message: '恭喜你，登录成功',
                            type: 'success'
                        });

                    }else {
                        _this.$message.error('账号或密码有误，登录失败');
                    }
                })
            },
            //已有账号方法
            yyzh() {
                this.rigisterVisible=false;
                this.loginVisible=true;
            },
            //还没有账号
            myzh() {
                this.loginVisible=false;
                this.rigisterVisible=true;
            }

        }
    });
</script>
</body>
</html>